<template>
  <!--后厨物资管理- 仓库信息页面-->
  <div>
    <cus-card class="cus_cardBox" style="margin-top: 0" :showTitle="false">
      <div class="btnBox">
        <cusButton type="primary" @onClick="onAdd()" style="width:150px;"
          >添加</cusButton
        >
      </div>
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
      >
        <template slot-scope="{ row }" slot="deleted">
          <span class="status-backgroud-red" v-if="row.deleted == 1"
            >已禁用</span
          >
          <span class="status-backgroud-green" v-else>已启用</span>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              :style="{ color: row.defaultStock == 0 ? '#1E6FFF' : 'green' }"
              style="padding: 0 5px"
              @onClick="setDefaultStockApi(row)"
            >
              <Icon type="ios-switch" size="4" style="margin: 2px 5px 0 0" />
              <span>{{ row.defaultStock == 0 ? "设为默认" : "默认" }}</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 8px"
              @onClick="onEdit(row)"
            >
              <Icon
                type="md-color-filter"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>编辑</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              :style="{ color: row.deleted == 1 ? 'green' : 'red' }"
              style="padding: 0 8px"
              @onClick="deleteGetGoodsBasstockApi(row.id)"
            >
              <Icon
                v-if="row.deleted == 0"
                type="md-checkmark-circle"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <Icon
                v-if="row.deleted == 1"
                type="md-remove-circle"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>{{ row.deleted == 1 ? "启用" : "禁用" }}</span>
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page
          class="mt_20"
          :data="pages"
          @pageChange="getBasstockSelectListApi()"
        ></cus-page>
      </div>
    </cus-card>
    <!--添加仓库信息-->
    <addStorehouse ref="addStorehouse"></addStorehouse>
  </div>
</template>
<script>
import {
  getBasstockSelectList,
  deleteGetGoodsBasstock,
  setDefaultStock
} from "@/api/business/manager";
import addStorehouse from "./components/addStorehouse.vue";
import CusCard from "../../../../../cuview-ui/components/cus-card/cus-card.vue";
export default {
  components: { addStorehouse, CusCard },
  data() {
    return {
      form: {
        name: "", //仓库名秤
        stockType: "", //仓库类型
        loading: false
      },
      ruleValidate: {}, //rule验证
      stockTypeTree: [], //仓库类型Select数据源
      // 表头
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70
        },
        {
          title: "仓库编号",
          key: "outerNo",
          align: "center",
          minWidth: 125
        },
        {
          title: "仓库名称",
          key: "name",
          align: "center",
          minWidth: 125
        },
        {
          title: "责任人",
          key: "personInCharge",
          align: "center",
          minWidth: 125
        },
        {
          title: "状态",
          key: "deleted",
          slot: "deleted",
          align: "center",
          minWidth: 100
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
          minWidth: 125
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          minWidth: 125
        },
        {
          title: "操作",
          fixed: "right", // 右侧固定
          slot: "operation",
          align: "center",
          width: 245
        }
      ],
      data: [], // 表格列表
      // 分页
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    };
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.getBasstockSelectListApi();
    },
    //添加仓库
    onAdd() {
      this.$refs["addStorehouse"].stockTypeTree = JSON.parse(
        JSON.stringify(this.stockTypeTree)
      ); //传递仓库类型Select数据源
      this.$refs["addStorehouse"].show();
    },
    //修改仓库
    onEdit(row) {
      this.$refs["addStorehouse"].form = JSON.parse(JSON.stringify(row)); //传递仓库类型Select数据源
      this.$refs["addStorehouse"].stockTypeTree = JSON.parse(
        JSON.stringify(this.stockTypeTree)
      ); //传递仓库类型Select数据源
      this.$refs["addStorehouse"].show();
    },
    //删除仓库
    onDelete(row) {
      this.$cu
        .dialog({
          params: row
        })
        .then(({ id }) => {
          this.deleteGetGoodsBasstockApi(id);
        });
    },
    //物资仓库-列表-------------------------接口
    getBasstockSelectListApi() {
      return new Promise(resolve => {
        let params = {
          stockType: this.form.stockType, //仓库类型
          name: this.form.name, //擦萌哭名称
          current: this.pages.page,
          size: this.pages.pageSize
        };
        getBasstockSelectList(params).then(res => {
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    //删除仓库---------------------接口
    deleteGetGoodsBasstockApi(id) {
      return new Promise(resolve => {
        deleteGetGoodsBasstock({
          id: id
        }).then(res => {
          if (res.retCode == 2000) {
            this.getBasstockSelectListApi();
          }
          resolve();
        });
      });
    },
    // 设为默认仓库
    setDefaultStockApi(row) {
      return new Promise(resolve => {
        let params = {
          id: row.id
        };
        setDefaultStock(params).then(res => {
          if (res.retCode == 2000) {
            this.onInit();
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.btnBox {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
.status-backgroud-green {
  display: inline-block;
  padding: 2px 6px;
  background-color: green;
  color: white;
  border-radius: 6px;
}
.status-backgroud-red {
  display: inline-block;
  padding: 2px 6px;
  background-color: red;
  color: white;
  border-radius: 6px;
}
</style>
